<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!--
    引用的插件引用库
    -->
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/TouchSlide.1.1.js"></script>
    <style type="text/css">
        /* 焦点图 */
        #slideBox{ position:relative; overflow:hidden;  width: 100%;/* 设置焦点图最大宽度 */ }
        .slideBox .hd{ position:absolute; height:28px; line-height:28px; bottom:0; right:0; z-index:1; }
        .slideBox .hd li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#333; text-indent:-9999px; overflow:hidden; margin:0 6px;   }
        .slideBox .hd li.on{ background:#fff;  }
        .slideBox .bd{ position:relative; z-index:0; }
        .slideBox .bd li{ position:relative; text-align:center;  }
        .slideBox .bd li img{ background:url(images/loading.gif) center center no-repeat; vertical-align:top; width:100%;
            /* 图片宽度100%，达到自适应效果 */}
        .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */
        .slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px; background:url(images/focusBg.png) repeat-x; color:#fff;  text-align:left;  }

    </style>


</head>
<body>

  <header class="search">
      <div class="logo">
      <img src="img/CzAAbRZ98thlD7oAAAAASUVORK5CYII=.png" alt=""/>
      </div>
     <div class="search-input">
         <input type="text"class="input"/>
         <div class="search-icon"></div>
     </div>
      <div class="MENU">
          <span class="sp1"></span>
          <span class="sp2"></span>
          <span class="sp3"></span>
      </div>
  </header>

<!--轮播-->
        <section class="sec1">
        <div id="slideBox" class="slideBox">
            <div class="bd">
                <ul>
                    <li>
                        <a class="pic" href="#"><img src="img/sl3.jpg" /></a>

                    </li>
                    <li>
                        <a class="pic" href="#"><img src="img/sl4.jpg"/></a>

                    </li>
                    <li>
                        <a class="pic" href="#"><img src="img/sl2.jpg"/></a>

                    </li>
                    <li>
                        <a class="pic" href="#"><img src="img/sl1.jpg"/></a>

                    </li>
                </ul>
            </div>

            <div class="hd">
                <ul></ul>
            </div>
        </div>
        </section>
        <script type="text/javascript">
            TouchSlide({
                slideCell:"#slideBox",
                titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                mainCell:".bd ul",
                effect:"leftLoop",
                autoPage:true,//自动分页
                autoPlay:true //自动播放
            });
        </script>

<!--第二部分nav-->
    <section class="sec2">
         <nav>
             <a href="javascript:void(0)">
                 <i class="nav-img1"></i>
                 <span>新品</span>
             </a>
             <a href="javascript:void(0)">
                 <i class="nav-img2"></i>
                 <span>商品分类</span>
             </a>
             <a href="javascript:void(0)">
                 <i class="nav-img3"></i>
                 <span>我的</span>
             </a>
             <a href="javascript:void(0)" style="border-right: none">
                 <i class="nav-img4"></i>
                 <span>社区</span>
             </a>
             <a href="javascript:void(0)">
                 <i class="nav-img5"></i>
                 <span>私人定制</span>
             </a>
             <a href="javascript:void(0)">
                 <i class="nav-img6"></i>
                 <span>服务与咨询</span>
             </a> <a href="javascript:void(0)">
             <i class="nav-img7"></i>
             <span>乐商店</span>
         </a>
             <a href="javascript:void(0)" style="border-right: none">
                 <i class="nav-img8"></i>
                 <span>想约我么</span>
             </a>

         </nav>
    </section>

<!--第三部分-->
    <section class="sec3">
        <div class="sec3-imgborder">
        <img src="img/sec31.jpg" alt=""/>
        </div>
        <div class="sec3-imgborder">
            <img src="img/sec32.jpg" alt=""/>
        </div>
    </section>

  <!--闪购-->
     <section class="sec4">
              <h3 class="h3">闪购</h3>
             <div class="left">
                 <img src="img/sec41.jpg" alt=""/>
             </div>
         <div class="right">
             <img src="img/sec42.jpg" />
             <img src="img/sec43.jpg"/>
         </div>
     </section>
   <footer class="footer">
       <div class="footer-nav">
         
           <div class="footer-bottom">
           <div class="footer-bottom1">
                <h3 class="h3">客户端</h3>
                <h3>触屏端</h3>
                <h3>电脑端</h3>
           </div>
             <div class="footer-bottom2">
                 <span>Copyright © 2014 联想商城 All Rights Reserved</span>
             </div>
           </div>
       </div>

   </footer>
</body>
<script>



</script>

</html>